<template>
  <div>
      <h1>登陆</h1>
      <!-- 顶部栏 -->
      <van-nav-bar
        class="my-nav-bar"
        title="登陆"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />

      <!-- form表单 带验证 -->
      <van-form @submit="onSubmit">
          <van-field
            required
            v-model="mobile"
            name="mobile"
            type="tel"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
                      { required: true, message: '请填写手机号' },
                      {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '手机号格式不对'
                      }
                    ]"
          />
          <van-field
            required
            v-model="code"
            name="code"
            label="验证码"
            placeholder="请输入验证码"
            :rules="[
                      { required: true, message: '验证码没有写哦!' },
                      { pattern: /\d{6}/, message: '验证码格式不对' }
                    ]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" 
            native-type="submit"
            :disabled="isLoading" 
            :loading ="isLoading" 
            loading-text="登陆中..."
            >提交</van-button>
          </div>
      </van-form>
  </div>
</template>

<script>
// 请记住 导入局部组件的 方法 是这样子的 啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!1
import {userLogin} from './user.js'
// 导入token
import {saveToken} from '../../utils/token.js'

export default {
    data() {
        return {
            mobile: '',
            code: '',
            isLoading:false,
        }
    },  
    methods: {
        // 这个破玩意只能接受 表单里面的name值 , 所以需要将用户输入的数据巧妙的传给name值
        onSubmit(values) {
            // console.log('submit', values);
            this.isLoading = true

            // 对象解构 , 双方都得是对象
            // 双方的 参数还得 相同
            userLogin(values).then(res=>{
                console.log(res);
                this.$toast.success('登陆成功')
                saveToken(res.data.data)
                //跳转首页
                this.$router.push({ path: '/' })
            })
            .catch(err=>{
                this.$toast.success('账号或密码错误')
            })
            .then(res=>{    //最后一个then , 不管成功还是失败, 都会执行
                    this.isLoading = false
            })
        },
        
    },
}
</script>


<style lang="less">
/* 使用less , 可以重叠样式 加权重 */
    .my-nav-bar {
        .van-nav-bar__content {
            background-color: skyblue;
            .van-nav-bar__title {
                color: #fff;
            }
            .van-nav-bar__left {
                .van-nav-bar__arrow {
                    color: #fff;
                }
                .van-nav-bar__text {
                    color: #fff;
                }
            }
        }
    }
</style>